<template>
  <div class="broken"></div>
</template>
<script>
export default {
  name: "brokenLine",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      date: [],
      number: [],
    };
  },
  mounted() {},
  methods: {
    setup(date, numder) {
      let borken = this.$echarts.init(this.$el);
      let option = {
        title:{
              text:"文章发布统计图",
              show:true
              },
        xAxis: {
          type: "category",
          data: date,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: numder,
            type: "line",
            label: {
              show: false,
            },
            emphasis: {
              label: {
                show: true,
                formatter:"{b}:{c}",
                position: [70,10],
                width:100,
                height:40,
                color:"#fff",
                backgroundColor: "rgba(0, 0, 0, 0.81)",
                verticalAlign: "middle",
                align: "center"

              },
            },
          },
        ],
      };
      borken.setOption(option);
    },
  },
  watch: {
    //监听数据是否传输进来了
    data() {
      this.data.forEach((item) => {
        this.date.push(item.date.slice(0, 10));
        this.number.push(item.count);
      });
      //生成数据图dom
      this.setup(this.date, this.number);
    },
  },
};
</script>
<style scoped>
.broken {
  width: 300px;
  height: 300px;
}
</style>